import { Col, Row } from 'antd';
import React from 'react';
import Chart from '../../components/Chart';
// import { calculateMA, splitData, DataSources, SubjectStatistics, AnnualIncrement, MonthlyIncrement, TotalResources, Documents, CommonQuantity, downloadNum } from './echarts';
import styles from './style.less';
import { connect } from 'dva'

@connect(({global})=>({userId: global.userId}))
class Statistics extends React.PureComponent {
  state = {
    dataSources: {},
    subjectStatistics: {},
    annualIncrement: {},
    monthlyIncrement: {},
    totalResources: {},
    documents: {},
    commonQuantity: {},
    downloadNum: {}
  }
  componentDidMount = () => {
    // 数据来源
    this.props.dispatch({
      type: "global/queryStatistics",
      payload: {
        type: 1
      }
    }).then(res => {
      let params = []
      res.data.DataSources.forEach((element, index) => {
        params[index] = { value: element.percentage, name: element.dicName }
      });
      this.setState({
        dataSources: {
          legend: {
            top: 'bottom',
            textStyle: { //图例文字的样式
              color: '#fff',
              fontSize: 16
            },
          },
          series: [
            {
              name: '数据来源',
              type: 'pie',
              radius: [40, 100],
              center: ['50%', '45%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: params
            }
          ]
        }
      })
    })
    // 学科统计
    this.props.dispatch({
      type: "global/queryStatistics",
      payload: {
        type: 2
      }
    }).then(res => {
      var p1 = []
      const dic1 = res.data.Subjects[0].dicChildList
      dic1.forEach((item, index) => {
        let child1 = {}
        child1.name = item.dicName;
        child1.itemStyle = {
          color: '#' + (~~(Math.random() * (1 << 24))).toString(16)
        }
        if (item.dicChildList.length > 0) {
          const dic2 = item.dicChildList
          let children = []
          dic2.forEach((ite, inde) => {
            let child2 = {}
            child2.name = ite.dicName
            child2.itemStyle = {
              color: '#' + (~~(Math.random() * (1 << 24))).toString(16)
            }
            if (ite.dicChildList.length > 0) {
              const dic3 = ite.dicChildList
            } else {
              child2.value = ite.percentage
            }
            children[inde] = child2
          })
          child1.children = children
        } else {
          child1.value = item.percentage
        }
        p1[index] = child1
      });
      this.setState({
        subjectStatistics: {
          series: {
            type: 'sunburst',
            data: p1,
            radius: [0, '95%'],
            sort: null,
            emphasis: {
              focus: 'ancestor'
            },
            levels: [{}, {
              r0: '35%',
              r: '55%',
              itemStyle: {
                borderWidth: 2
              },
              label: {
                rotate: 'tangential'
              }
            }, {
              r0: '55%',
              r: '90%',
              label: {
                align: 'right'
              }
            }, {
              r0: '90%',
              r: '92%',
              label: {
                position: 'outside',
                padding: 3,
                silent: false
              },
              itemStyle: {
                borderWidth: 3
              }
            }]
          }
        }
      })

    })
    // 年度增量
    this.props.dispatch({
      type: "global/queryStatistics",
      payload: {
        type: 3
      }
    }).then(res => {
      const TotalHits = res.data.AnnualIncrement.TotalHits,
        TotalNum = res.data.AnnualIncrement.TotalNum,
        TotalSize = res.data.AnnualIncrement.TotalSize,
        TotalUse = res.data.AnnualIncrement.TotalUse
      let x1 = [], y1 = [], y2 = [], y3 = [], y4 = []
      TotalHits.forEach((item, index) => {
        x1[index] = item.time
        y1[index] = item.data
      })
      TotalNum.forEach((ite, inde) => {
        y2[inde] = ite.data
      })
      TotalSize.forEach((it, ind) => {
        y3[ind] = it.data
      })
      TotalUse.forEach((i, inx) => {
        y4[inx] = i.data
      })
      this.setState({
        annualIncrement: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['访问量', '资源总数', '资源大小', '使用量'],
            textStyle: { //图例文字的样式
              color: '#fff',
              fontSize: 16
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: x1
          },
          yAxis: {
            type: 'value',
            scale: true
          },
          series: [
            {
              name: '访问量',
              type: 'line',
              stack: '总量',
              data: y1
            },
            {
              name: '资源总数',
              type: 'line',
              stack: '总量',
              data: y2
            },
            {
              name: '资源大小',
              type: 'line',
              stack: '总量',
              data: y3
            },
            {
              name: '使用量',
              type: 'line',
              stack: '总量',
              data: y4
            }
          ]
        }
      })
    })
    // 月度增量
    this.props.dispatch({
      type: "global/queryStatistics",
      payload: {
        type: 4
      }
    }).then(res => {
      const TotalHits = res.data.MonthlyIncrement.TotalHits,
        TotalNum = res.data.MonthlyIncrement.TotalNum,
        TotalSize = res.data.MonthlyIncrement.TotalSize,
        TotalUse = res.data.MonthlyIncrement.TotalUse
      let x1 = [], y1 = [], y2 = [], y3 = [], y4 = []
      TotalHits.forEach((item, index) => {
        x1[index] = item.time
        y1[index] = item.data
      })
      TotalNum.forEach((ite, inde) => {
        y2[inde] = ite.data
      })
      TotalSize.forEach((it, ind) => {
        y3[ind] = it.data
      })
      TotalUse.forEach((i, inx) => {
        y4[inx] = i.data
      })
      this.setState({
        monthlyIncrement: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['访问量', '资源总数', '资源大小', '使用量'],
            textStyle: { //图例文字的样式
              color: '#fff',
              fontSize: 16
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: x1
          },
          yAxis: {
            type: 'value',
            scale: true
          },
          series: [
            {
              name: '访问量',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: y1
            },
            {
              name: '资源总数',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: y2
            },
            {
              name: '资源大小',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: y3
            },
            {
              name: '使用量',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: y4
            }
          ]
        }
      })
    })
    // 资源总量
    this.props.dispatch({
      type: "global/queryStatistics",
      payload: {
        type: 5
      }
    }).then(res => {
      // totalResources recordTime recordData
      console.log('res5:::', res.data.ResourcesTotal)
      let x1 = [], y1 = []
      res.data.ResourcesTotal.forEach((item, index) => {
        x1[index] = item.recordTime
        y1[index] = item.recordData
      })

      this.setState({
        totalResources: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['line', 'bar'],
            textStyle: {
              color: '#ccc'
            }
          },
          xAxis: {
            data: x1,
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            }
          },
          yAxis: {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            scale: true
          },
          grid: [{
            left: '15%',
            bottom: '10%',
            top: '10%',
            right: '10%'
          }],
          series: [{
            name: '总量',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 15,
            data: y1
          }]
        }
      })
    })
    /* 
    // 文献数量
    this.props.dispatch({
      type: "global/queryStatistics",
      payload: {
        type: 6
      }
    }).then(res => {
      let params = []
      this.setState({
        documents: {
          legend: {
            top: 'bottom'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '面积模式',
              type: 'pie',
              radius: [20, 80],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: params
            }
          ]
        }
      })
    }) 
    */
    // 最常用数据
    this.props.dispatch({
      type: "global/queryStatistics",
      payload: {
        type: 7
      }
    }).then(res => {
      // CommonData
      let params1 = [], params2 = []
      res.data.CommonData.forEach((item, index) => {
        params1[index] = item.title
        params2[index] = item.usedNum
      })
      this.setState({
        commonQuantity: {
          xAxis: {
            type: 'category',
            data: params1
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: params2,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }]
        }
      })
    })
    // 下载数量
    this.props.dispatch({
      type: "global/queryStatistics",
      payload: {
        type: 8
      }
    }).then(res => {
      let params1 = [], params2 = []
      res.data.MonthlyDownloads.forEach((item, index) => {
        params1[index] = item.recordTime
        params2[index] = item.recordData
      })
      this.setState({
        downloadNum: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['line', 'bar'],
            textStyle: {
              color: '#ccc'
            }
          },
          xAxis: {
            data: params1,
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            }
          },
          yAxis: {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            scale: true
          },
          series: [{
            name: '数量',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              barBorderRadius: 5,
              color: '#43eec6'
            },
            data: params2
          }]
        }
      })
    })
  }
  render() {
    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.bannerTitle}>
            <p>资源统计</p>
            <p>Resource statistics</p>
          </div>
        </div>
        <div className={styles.chartList}>
          <div style={{margin:"10px"}}>
            <Row gutter={[15, 20]}>
              <Col span={12}>
                <div className={styles.chartBox}>
                  <div className={styles.chart}>
                    <Chart option={this.state.dataSources} />
                  </div>
                  <div className={styles.chartTitle}>数据来源</div>
                </div>
              </Col>
              <Col span={12}>
                <div className={styles.chartBox}>
                  <div className={styles.chart}>
                    <Chart option={this.state.subjectStatistics} />
                  </div>
                  <div className={styles.chartTitle}>学科统计</div>
                </div>
              </Col>
              <Col span={12}>
                <div className={styles.chartBox}>
                  <div className={styles.chart}>
                    <Chart option={this.state.annualIncrement} />
                  </div>
                  <div className={styles.chartTitle}>年度增量</div>
                </div>
              </Col>
              <Col span={12}>
                <div className={styles.chartBox}>
                  <div className={styles.chart}>
                    <Chart option={this.state.monthlyIncrement} />
                  </div>
                  <div className={styles.chartTitle}>月度增量</div>
                </div>
              </Col>
              <Col span={12}>
                <div className={styles.chartBox}>
                  <div className={styles.chart}>
                    <Chart option={this.state.totalResources} />
                  </div>
                  <div className={styles.chartTitle}>资源总量</div>
                </div>
              </Col>
              {/* <Col span={12}>
              <div className={styles.chartBox}>
                <div className={styles.chart}>
                  <Chart option={this.state.documents} />
                </div>
                <div className={styles.chartTitle}>文献数量</div>
              </div>
            </Col> */}
              <Col span={12}>
                <div className={styles.chartBox}>
                  <div className={styles.chart}>
                    <Chart option={this.state.commonQuantity} />
                  </div>
                  <div className={styles.chartTitle}>常用数量</div>
                </div>
              </Col>
              <Col span={12}>
                <div className={styles.chartBox}>
                  <div className={styles.chart}>
                    <Chart option={this.state.downloadNum} />
                  </div>
                  <div className={styles.chartTitle}>下载数量</div>
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    );
  }
}

export default Statistics;